import React, { useEffect } from 'react'
import './App.css'
import { AuthContext, authInitialState, authReducer } from './contexts/authContext'
import Header from './components/Header'
import AddSong from './components/AddSong'

function App() {
  // context 跨层级 跨组件
  // useReducer 比 useState 更严格的状态管理
  const [state,dispatch] = React.useReducer(authReducer,authInitialState)

  useEffect(() => {
    setTimeout(() => {
      dispatch({type: "LOGIN", payload: {user: {name: 'zyy', age: 18}, token: '020101'}})
    }, 1000)
  }, [])

  return (
    <AuthContext.Provider value={{
      state,
      dispatch
    }}>
      <Header />
      { state.isAuthenticated && <AddSong /> }
    </AuthContext.Provider>
  )
}

export default App